<template>
  <div class="app-container">
    <div class="container">
      <el-form ref="query" :inline="true" :model="query" size="small" class="demo-form-inline">
        <el-form-item label="宝贝名称:" prop="name">
          <el-input
            v-model="query.name"
            clearable
            placeholder=""
            style="width:200px;"
            class="filter-item"/>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="operate-container">
        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          @click="addSoreCommodity">添加积分宝贝
        </el-button>
      </div>
      <!--表格渲染-->
      <el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
        <el-table-column label="序号" type="index"/>
        <el-table-column label="活动宝贝" prop="name"/>
        <el-table-column label="创建时间" prop="create_date"/>
        <el-table-column label="操作" align="center" width="270">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-popover
              :ref="scope.row.commodity_id"
              placement="top"
              width="180">
              <p>确定删除本条数据吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[scope.row.commodity_id].doClose()">取消</el-button>
                <el-button :loading="delLoading" type="primary" size="mini" @click="del(scope.row.commodity_id)">
                  确定
                </el-button>
              </div>
              <el-button slot="reference" type="text" size="mini">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page + 1"
        background
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { editScoreCommodity } from '@/api/mall/pointsmall'
export default {
  mixins: [initData],
  data() {
    return {
      data: [],
      delLoading: false,
      query: {
        name: ''
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.url = '/api/get-score-commodity-list'
      this.params = { page: this.page, size: this.size }
      const query = this.query
      const name = query.name
      const sort = 'create_date,desc'
      // 积分商品
      this.params = { page: this.page, size: this.size, sort: sort, is_score_commodity: 1 }
      if (name && name !== undefined) { this.params['name'] = name }
      return true
    },
    resetQuery() {
      // 重置筛选框
      this.query = {
        name: ''
      }
      // 重新请求数据
      this.init()
    },
    addSoreCommodity() {
      // 添加积分商品
      this.$router.push({ path: '/commodity/pointsmall' })
    },
    edit(res) {
      // 编辑商品
      const info = {
        select: res.commodity_id,
        commodity_id: res.commodity_id,
        is_score_commodity: res.is_score_commodity,
        score_type: res.score_type,
        sell_score: res.sell_score,
        cover_url: res.cover_url,
        name: res.name
      }
      this.$router.push({ path: '/commodity/pointsmall', query: { 'info': info }})
    },
    del(res) {
      // 删除商品
      const info = {
        commodity_id: res,
        is_score_commodity: 0,
        score_type: 0,
        sell_score: 0
      }
      this.delLoading = true
      editScoreCommodity(info).then(res => {
        this.$notify({
          title: '删除成功',
          type: 'success',
          duration: 2500
        })
        this.dleChangePage()
        this.init()
        this.delLoading = false
        this.$refs[res].doClose()
      }).catch(() => {
        this.delLoading = false
        this.$refs[res].doClose()
      })
    }
  }
}
</script>

<style scoped>
</style>
